<template>
	<view class="scenic-detail">
		<!-- 顶部轮播图 -->
		<view class="swiper-container">
			<swiper 
				class="swiper" 
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="3000" 
				:duration="500"
				indicator-color="rgba(255, 255, 255, 0.5)"
				indicator-active-color="#fff"
			>
				<swiper-item v-for="(photo, index) in photos" :key="index">
					<image :src="photo.url" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>
			
			<!-- 返回按钮 -->
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
			</view>
			
			<!-- 分享按钮 -->
			<view class="share-btn" @click="shareSc">
				<u-icon name="share" color="#fff" size="22"></u-icon>
			</view>
		</view>
		
		<!-- 景点基本信息 -->
		<view class="scenic-info">
			<view class="info-header">
				<view class="title-row">
					<text class="title">{{ scenic.title }}</text>
					<view class="level-tag" v-if="scenic.level">
						<text>{{ scenic.level }}</text>
					</view>
				</view>
				<view class="tags">
					<text class="tag" v-if="scenic.type">{{ scenic.type }}</text>
					<text class="tag" v-if="scenic.keywords">{{ scenic.keywords.split('·')[0] }}</text>
				</view>
			</view>
			
			<view class="rating-row">
				<view class="rating">
					<u-rate :value="scenic.rate" :size="16" :count="5" :disabled="true" active-color="#FFB400"></u-rate>
					<text class="rate-text">{{ scenic.rate }}</text>
					<text class="comment-count">{{ scenic.commentCount }}条评论</text>
				</view>
				<view class="price">
					<text class="price-label">¥</text>
					<text class="price-value">{{ scenic.price }}</text>
					<text class="price-unit">起</text>
				</view>
			</view>
			
			<view class="address-row" @click="openMap">
				<u-icon name="map-pin-fill" color="#666" size="16"></u-icon>
				<text class="address">{{ scenic.address }}</text>
				<u-icon name="arrow-right" color="#999" size="14"></u-icon>
			</view>
		</view>
		
		<!-- 操作按钮组 -->
		<view class="action-bar">
			<view class="action-item" @click="toggleFavorite">
				<u-icon :name="isFavorited ? 'heart-fill' : 'heart'" :color="isFavorited ? '#FF4D4F' : '#666'" size="24"></u-icon>
				<text :class="['action-text', isFavorited ? 'active' : '']">{{ isFavorited ? '已收藏' : '收藏' }}</text>
			</view>
			<view class="action-item" @click="goToComments">
				<u-icon name="chat-fill" color="#666" size="24"></u-icon>
				<text class="action-text">评论</text>
			</view>
			<view class="action-item" @click="shareScenic">
				<u-icon name="share-fill" color="#666" size="24"></u-icon>
				<text class="action-text">分享</text>
			</view>
		</view>
		
		<!-- 门票选择 -->
		<view class="ticket-section">
			<view class="section-title">
				<text class="title-text">门票选择</text>
			</view>
			<view class="ticket-list">
				<view 
					v-for="ticket in tickets" 
					:key="ticket.id" 
					:class="['ticket-item', selectedTicket && selectedTicket.id === ticket.id ? 'selected' : '']"
					@click="selectTicket(ticket)"
				>
					<view class="ticket-info">
						<text class="ticket-name">{{ ticket.name }}</text>
						<text class="ticket-desc" v-if="ticket.description">{{ ticket.description }}</text>
					</view>
					<view class="ticket-price">
						<text class="price-symbol">¥</text>
						<text class="price-value">{{ ticket.price }}</text>
						<text class="original-price" v-if="ticket.originalPrice">¥{{ ticket.originalPrice }}</text>
					</view>
					<view class="ticket-select" v-if="selectedTicket && selectedTicket.id === ticket.id">
						<u-icon name="checkbox-mark" color="#1890FF" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 景点详情 -->
		<view class="detail-section">
			<view class="section-title">
				<text class="title-text">景点详情</text>
			</view>
			<view class="detail-content">
				<text class="content-text">{{ scenic.intro }}</text>
			</view>
			<view class="detail-item" v-if="scenic.opentime">
				<text class="item-label">开放时间：</text>
				<text class="item-value">{{ scenic.opentime }}</text>
			</view>
		</view>
		
		<!-- 用户评论 -->
		<view class="comment-section">
			<view class="section-title">
				<text class="title-text">用户评价</text>
				<text class="more-text" @click="viewAllComments">查看全部 ›</text>
			</view>
			<view class="comment-list" v-if="comments.length > 0">
				<view v-for="comment in comments.slice(0, 3)" :key="comment.id" class="comment-item">
					<view class="comment-header" @click="goToUserProfile(comment.userId)">
						<image :src="comment.userAvatar || defaultAvatar" class="user-avatar"></image>
						<view class="user-info">
							<text class="user-name">{{ comment.userName }}</text>
							<view class="comment-rate">
								<u-rate :value="comment.rate" :size="12" :disabled="true" active-color="#FFB400"></u-rate>
							</view>
						</view>
						<text class="comment-time">{{ formatTime(comment.createTime) }}</text>
					</view>
					<view class="comment-content">
						<text class="content-text">{{ comment.content }}</text>
					</view>
					<view class="comment-images" v-if="comment.images">
						<image 
							v-for="(img, index) in comment.images.split(',')" 
							:key="index" 
							:src="img" 
							class="comment-image"
							@click="previewImage(comment.images.split(','), index)"
						></image>
					</view>
					<!-- 回复列表 -->
					<view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
						<view v-for="reply in comment.replies" :key="reply.id" class="reply-item">
							<text class="reply-author">{{ reply.userName }}：</text>
							<text class="reply-content">{{ reply.content }}</text>
						</view>
					</view>
					<view class="comment-actions">
						<view class="action-item" @click="likeComment(comment)">
							<u-icon :name="comment.isLiked ? 'thumb-up-fill' : 'thumb-up'" :color="comment.isLiked ? '#1890FF' : '#999'" size="16"></u-icon>
							<text class="action-text">{{ comment.likeCount || '赞' }}</text>
						</view>
						<view class="action-item" @click="replyComment(comment)">
							<u-icon name="chat" color="#999" size="16"></u-icon>
							<text class="action-text">回复</text>
						</view>
						<view class="action-item" v-if="comment.userId === userId" @click="appendComment(comment)">
							<u-icon name="edit-pen" color="#999" size="16"></u-icon>
							<text class="action-text">追评</text>
						</view>
						<view class="action-item" v-if="comment.userId === userId" @click="deleteComment(comment)">
							<u-icon name="trash" color="#FF4D4F" size="16"></u-icon>
							<text class="action-text" style="color: #FF4D4F;">删除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-comment" v-else>
				<text>暂无评论，快来抢沙发吧~</text>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="bar-left">
				<view class="bar-item" @click="contactService">
					<u-icon name="chat" color="#666" size="22"></u-icon>
					<text class="bar-text">客服</text>
				</view>
				<view class="bar-item" @click="toggleFavorite">
					<u-icon :name="isFavorited ? 'heart-fill' : 'heart'" :color="isFavorited ? '#FF4D4F' : '#666'" size="22"></u-icon>
					<text :class="['bar-text', isFavorited ? 'active' : '']">收藏</text>
				</view>
			</view>
			<view class="bar-right">
				<button class="book-btn" @click="bookTicket">立即预订</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenicId: null,
			scenic: {},
			photos: [],
			tickets: [],
			comments: [],
			selectedTicket: null,
			isFavorited: false,
			userId: null,  // 当前用户ID
			defaultAvatar: 'https://picsum.photos/100/100?random=999'
		};
	},
	onLoad(options) {
		if (options.id) {
			this.scenicId = options.id;
		}
		
		// 获取用户ID
		this.refreshUserInfo();
		
		// 加载页面数据
		if (this.scenicId) {
			this.loadScenicDetail();
			this.loadPhotos();
			this.loadTickets();
			this.loadComments();
		}
		
		// 监听评论刷新事件
		uni.$on('refreshComments', this.handleRefreshComments);
	},
	
	onUnload() {
		// 移除监听
		uni.$off('refreshComments', this.handleRefreshComments);
	},
	
	onShow() {
		// 每次页面显示时刷新用户信息（从登录页返回时会触发）
		this.refreshUserInfo();
		
		// 重新检查收藏状态
		if (this.userId && this.scenicId) {
			this.checkFavoriteStatus();
		}
	},
	methods: {
		// 刷新用户信息
		refreshUserInfo() {
			// 尝试获取用户信息（兼容不同的键名）
			let userInfo = uni.getStorageSync('userInfo');
			if (!userInfo || !userInfo.id) {
				userInfo = uni.getStorageSync('user');
			}
			
			console.log('刷新用户信息：', userInfo);
			
			if (userInfo && userInfo.id) {
				this.userId = userInfo.id;
			} else {
				this.userId = null;
			}
		},
		
		// 处理评论刷新事件
		handleRefreshComments(data) {
			if (data && data.scenicId === this.scenicId) {
				console.log('收到评论刷新事件，重新加载评论');
				this.loadComments();
				this.loadScenicDetail(); // 同时刷新景点详情（更新评论数）
			}
		},
		
		// 加载景点详情
		async loadScenicDetail() {
			try {
				const res = await this.$api.getScenicDetail({
					id: this.scenicId
				});
				
				if (res.data && res.data.code === 200) {
					this.scenic = res.data.data;
					
					// 记录浏览足迹
					this.recordVisit();
				}
			} catch (error) {
				console.error('加载景点详情失败', error);
			}
		},
		
		// 加载景点图片
		async loadPhotos() {
			try {
				const res = await this.$api.getScenicPhotos({
					scenicId: this.scenicId
				});
				
				if (res.data && res.data.code === 200) {
					this.photos = res.data.data || [];
					
					// 如果没有图片，使用默认图片
					if (this.photos.length === 0) {
						this.photos = [
							{ url: 'https://picsum.photos/800/500?random=1' },
							{ url: 'https://picsum.photos/800/500?random=2' },
							{ url: 'https://picsum.photos/800/500?random=3' }
						];
					}
				}
			} catch (error) {
				console.error('加载景点图片失败', error);
			}
		},
		
		// 加载门票列表
		async loadTickets() {
			try {
				const res = await this.$api.getTicketList({
					scenicId: this.scenicId
				});
				
				if (res.data && res.data.code === 200) {
					this.tickets = res.data.data || [];
					
					// 默认选择第一个门票
					if (this.tickets.length > 0) {
						this.selectedTicket = this.tickets[0];
					}
				}
			} catch (error) {
				console.error('加载门票列表失败', error);
			}
		},
		
		// 加载评论列表
		async loadComments() {
			try {
				const res = await this.$api.getCommentList({
					targetType: 1, // 景点
					targetId: this.scenicId,
					page: 1,
					pageSize: 3
				});
				
				if (res.data && res.data.code === 200) {
					this.comments = res.data.data || [];
				}
			} catch (error) {
				console.error('加载评论失败', error);
			}
		},
		
		// 检查收藏状态
		async checkFavoriteStatus() {
			if (!this.userId) return;
			
			try {
				const res = await this.$api.checkFavorite({
					userId: this.userId,
					targetType: 1,
					targetId: this.scenicId
				});
				
				if (res.data && res.data.code === 200) {
					this.isFavorited = res.data.data;
				}
			} catch (error) {
				console.error('检查收藏状态失败', error);
			}
		},
		
		// 记录浏览足迹
		async recordVisit() {
			if (!this.userId) return;
			
			try {
				await this.$api.addUserStep({
					userId: this.userId,
					targetType: 1,
					targetId: this.scenicId
				});
			} catch (error) {
				console.error('记录足迹失败', error);
			}
		},
		
		// 切换收藏状态
		async toggleFavorite() {
			console.log('收藏按钮被点击');
			if (!this.userId) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '去登录',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}
				});
				return;
			}
			
			try {
				if (this.isFavorited) {
					// 取消收藏
					const res = await this.$api.removeFavorite({
						userId: this.userId,
						targetType: 1,
						targetId: this.scenicId
					});
					
					if (res.data && res.data.code === 200) {
						this.isFavorited = false;
						uni.showToast({
							title: '取消收藏',
							icon: 'success'
						});
					}
				} else {
					// 添加收藏
					const res = await this.$api.addFavorite({
						userId: this.userId,
						targetType: 1,
						targetId: this.scenicId
					});
					
					if (res.data && res.data.code === 200) {
						this.isFavorited = true;
						uni.showToast({
							title: '收藏成功',
							icon: 'success'
						});
					}
				}
			} catch (error) {
				console.error('收藏操作失败', error);
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
			}
		},
		
		// 选择门票
		selectTicket(ticket) {
			this.selectedTicket = ticket;
		},
		
		// 预订门票
		bookTicket() {
			console.log('预订按钮被点击', this.selectedTicket);
			if (!this.selectedTicket) {
				uni.showToast({
					title: '请先选择门票',
					icon: 'none'
				});
				return;
			}
			
			// 跳转到订单确认页
			uni.navigateTo({
				url: `/pages/order/confirm?scenicId=${this.scenicId}&ticketId=${this.selectedTicket.id}`
			});
		},
		
		// 点赞/取消点赞评论
		async likeComment(comment) {
			if (!this.userId) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '去登录',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}
				});
				return;
			}
			
			try {
				let res;
				if (comment.isLiked) {
					// 已点赞，取消点赞
					res = await this.$api.unlikeComment({
						userId: this.userId,
						commentId: comment.id
					});
				} else {
					// 未点赞，点赞
					res = await this.$api.likeComment({
						userId: this.userId,
						commentId: comment.id
					});
				}
				
				if (res.data && res.data.code === 200) {
					comment.isLiked = !comment.isLiked;
					comment.likeCount = comment.isLiked ? (comment.likeCount || 0) + 1 : (comment.likeCount || 1) - 1;
				}
			} catch (error) {
				console.error('点赞操作失败', error);
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
			}
		},
		
		// 跳转到评论页（写评价）
		goToComments() {
			console.log('评论按钮被点击');
			if (!this.userId) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '去登录',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}
				});
				return;
			}
			
			// 跳转到写评价页面
			uni.navigateTo({
				url: `/pages/comment/add?scenicId=${this.scenicId}`
			});
		},
		
		// 删除评论
		async deleteComment(comment) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这条评论吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({ title: '删除中...' });
							const result = await this.$api.deleteComment({
								userId: this.userId,
								commentId: comment.id
							});
							uni.hideLoading();
							
							if (result.data && result.data.code === 200) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								// 刷新评论列表
								this.loadComments();
							} else {
								uni.showToast({
									title: result.data.message || '删除失败',
									icon: 'none'
								});
							}
						} catch (error) {
							uni.hideLoading();
							console.error('删除评论失败', error);
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},
		
		// 回复评论
		replyComment(comment) {
			if (!this.userId) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}
				});
				return;
			}
			
			uni.showModal({
				title: '回复 ' + comment.userName,
				editable: true,
				placeholderText: '请输入回复内容',
				success: async (res) => {
					if (res.confirm && res.content) {
						try {
							uni.showLoading({ title: '发送中...' });
							const result = await this.$api.addComment({
								userId: this.userId,
								targetType: 2, // 2表示回复评论
								targetId: comment.id,
								content: res.content,
								rate: 0
							});
							uni.hideLoading();
							
							if (result.data && result.data.code === 200) {
								uni.showToast({
									title: '回复成功',
									icon: 'success'
								});
								// 刷新评论列表
								this.loadComments();
							} else {
								uni.showToast({
									title: result.data.message || '回复失败',
									icon: 'none'
								});
							}
						} catch (error) {
							uni.hideLoading();
							console.error('回复评论失败', error);
							uni.showToast({
								title: '回复失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},
		
		// 追评
		appendComment(comment) {
			uni.navigateTo({
				url: `/pages/comment/add?scenicId=${this.scenicId}&parentId=${comment.id}&isAppend=true`
			});
		},
		
		// 查看全部评论
		viewAllComments() {
			uni.navigateTo({
				url: `/pages/comment/list?scenicId=${this.scenicId}`
			});
		},
		
		// 跳转到用户主页
		goToUserProfile(userId) {
			uni.navigateTo({
				url: `/pages/user/profile?userId=${userId}`
			});
		},
		
		// 联系客服（跳转到AI客服）
		contactService() {
			console.log('客服按钮被点击');
			// 直接跳转到AI客服页面，无需登录
			uni.navigateTo({
				url: `/pages/chat/ai?scenicId=${this.scenicId}`
			});
		},
		
		// 分享景点
		shareScenic() {
			console.log('分享按钮被点击');
			
			// H5环境使用系统分享或提示
			// #ifdef H5
			const shareUrl = window.location.origin + `/pages/scenic/detail?id=${this.scenicId}`;
			const shareText = `${this.scenic.title || '景点详情'} - ${this.scenic.intro || '快来看看这个景点'}`;
			
			// 直接复制到剪贴板（不使用模态框）
			this.copyToClipboard(shareUrl);
			// #endif
			
			// #ifndef H5
			// 小程序或App使用原生分享
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: this.scenic.title || '景点详情',
				summary: this.scenic.intro || this.scenic.keywords || '快来看看这个景点',
				imageUrl: this.photos.length > 0 ? this.photos[0].url : '',
				href: `pages/scenic/detail?id=${this.scenicId}`,
				success: function (res) {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				},
				fail: function (err) {
					console.error('分享失败', err);
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			});
			// #endif
		},
		
		// 复制到剪贴板
		copyToClipboard(text) {
			// #ifdef H5
			// 方法1：使用 document.execCommand（最可靠）
			const textarea = document.createElement('textarea');
			textarea.value = text;
			textarea.style.position = 'fixed';
			textarea.style.top = '0';
			textarea.style.left = '0';
			textarea.style.width = '1px';
			textarea.style.height = '1px';
			textarea.style.padding = '0';
			textarea.style.border = 'none';
			textarea.style.outline = 'none';
			textarea.style.boxShadow = 'none';
			textarea.style.background = 'transparent';
			
			document.body.appendChild(textarea);
			textarea.focus();
			textarea.select();
			
			try {
				const successful = document.execCommand('copy');
				document.body.removeChild(textarea);
				
				if (successful) {
					uni.showToast({
						title: '链接已复制，可分享给好友',
						icon: 'success',
						duration: 2000
					});
				} else {
					this.showCopyModal(text);
				}
			} catch (err) {
				console.error('复制失败:', err);
				document.body.removeChild(textarea);
				this.showCopyModal(text);
			}
			// #endif
			
			// #ifndef H5
			// 小程序使用 uni.setClipboardData
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: '链接已复制',
						icon: 'success'
					});
				}
			});
			// #endif
		},
		
		// 显示复制链接的模态框
		showCopyModal(text) {
			uni.showModal({
				title: '分享景点',
				content: `链接：${text}`,
				confirmText: '我知道了',
				showCancel: false
			});
		},
		
		shareSc() {
			this.shareScenic();
		},
		
		// 打开地图
		openMap() {
			if (this.scenic.latitude && this.scenic.longitude) {
				uni.openLocation({
					latitude: parseFloat(this.scenic.latitude),
					longitude: parseFloat(this.scenic.longitude),
					name: this.scenic.title,
					address: this.scenic.address
				});
			}
		},
		
		// 预览图片
		previewImage(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		
		// 格式化时间
		formatTime(time) {
			if (!time) return '';
			
			const date = new Date(time);
			const now = new Date();
			const diff = now - date;
			
			const minute = 60 * 1000;
			const hour = 60 * minute;
			const day = 24 * hour;
			
			if (diff < minute) {
				return '刚刚';
			} else if (diff < hour) {
				return Math.floor(diff / minute) + '分钟前';
			} else if (diff < day) {
				return Math.floor(diff / hour) + '小时前';
			} else if (diff < 7 * day) {
				return Math.floor(diff / day) + '天前';
			} else {
				return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			}
		},
		
		// 返回
		goBack() {
			// 获取页面栈
			const pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上一页，返回首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.scenic-detail {
	width: 100%;
	min-height: 100vh;
	background: #F5F5F5;
	padding-bottom: 120rpx;
}

.swiper-container {
	position: relative;
	width: 100%;
	height: 500rpx;
	
	.swiper {
		width: 100%;
		height: 100%;
		
		.swiper-image {
			width: 100%;
			height: 100%;
		}
	}
	
	.back-btn {
		position: absolute;
		top: 40rpx;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.share-btn {
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
}

.scenic-info {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.info-header {
		margin-bottom: 20rpx;
		
		.title-row {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				flex: 1;
			}
			
			.level-tag {
				padding: 8rpx 16rpx;
				background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
				border-radius: 8rpx;
				
				text {
					font-size: 24rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}
		
		.tags {
			display: flex;
			gap: 15rpx;
			
			.tag {
				padding: 8rpx 16rpx;
				background: #F0F0F0;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	
	.rating-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.rating {
			display: flex;
			align-items: center;
			gap: 10rpx;
			
			.rate-text {
				font-size: 28rpx;
				color: #FFB400;
				font-weight: bold;
			}
			
			.comment-count {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.price {
			display: flex;
			align-items: baseline;
			
			.price-label {
				font-size: 24rpx;
				color: #FF4D4F;
			}
			
			.price-value {
				font-size: 40rpx;
				color: #FF4D4F;
				font-weight: bold;
			}
			
			.price-unit {
				font-size: 24rpx;
				color: #FF4D4F;
			}
		}
	}
	
	.address-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 20rpx 0;
		border-top: 1px solid #F0F0F0;
		
		.address {
			flex: 1;
			font-size: 26rpx;
			color: #666;
		}
	}
}

.action-bar {
	display: flex;
	background: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	
	.action-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		
		.action-text {
			font-size: 24rpx;
			color: #666;
			
			&.active {
				color: #FF4D4F;
			}
		}
	}
}

.ticket-section, .detail-section, .comment-section {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.more-text {
			font-size: 26rpx;
			color: #999;
		}
	}
}

.ticket-list {
	.ticket-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		border: 2px solid transparent;
		
		&.selected {
			background: #E6F7FF;
			border-color: #1890FF;
		}
		
		.ticket-info {
			flex: 1;
			
			.ticket-name {
				display: block;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			
			.ticket-desc {
				display: block;
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.ticket-price {
			display: flex;
			align-items: baseline;
			margin-right: 40rpx;
			
			.price-symbol {
				font-size: 24rpx;
				color: #FF4D4F;
			}
			
			.price-value {
				font-size: 36rpx;
				color: #FF4D4F;
				font-weight: bold;
			}
			
			.original-price {
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}
		
		.ticket-select {
			position: absolute;
			right: 30rpx;
		}
	}
}

.detail-content {
	.content-text {
		font-size: 28rpx;
		line-height: 48rpx;
		color: #666;
	}
}

.detail-item {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1px solid #F0F0F0;
	
	.item-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.item-value {
		font-size: 28rpx;
		color: #333;
	}
}

.comment-list {
	.comment-item {
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #F0F0F0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.comment-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.user-avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.user-info {
				flex: 1;
				
				.user-name {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 8rpx;
				}
			}
			
			.comment-time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.comment-content {
			margin-bottom: 20rpx;
			
			.content-text {
				font-size: 28rpx;
				line-height: 44rpx;
				color: #666;
			}
		}
		
		.comment-images {
			display: flex;
			gap: 15rpx;
			margin-bottom: 20rpx;
			
			.comment-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
		}
		
		.reply-list {
			margin-bottom: 20rpx;
			padding: 15rpx;
			background: #F7F8FA;
			border-radius: 8rpx;
			
			.reply-item {
				margin-bottom: 10rpx;
				font-size: 26rpx;
				line-height: 38rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.reply-author {
					color: #1890FF;
					font-weight: 500;
				}
				
				.reply-content {
					color: #666;
				}
			}
		}
		
		.comment-actions {
			display: flex;
			gap: 40rpx;
			
			.action-item {
				display: flex;
				align-items: center;
				gap: 8rpx;
				
				.action-text {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}

.empty-comment {
	padding: 60rpx 0;
	text-align: center;
	
	text {
		font-size: 26rpx;
		color: #999;
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
	
	.bar-left {
		display: flex;
		gap: 40rpx;
		
		.bar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			
			.bar-text {
				font-size: 22rpx;
				color: #666;
				
				&.active {
					color: #FF4D4F;
				}
			}
		}
	}
	
	.bar-right {
		.book-btn {
			padding: 20rpx 60rpx;
			background: linear-gradient(135deg, #FF6B6B 0%, #FF4D4F 100%);
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
			border: none;
		}
	}
}
</style>
